Klambi - Lightweight E-Commerce Fashion Theme

Fast and Powerful Fashion Store Solution


Klambi is modern and fresh WP theme for selling fashion products online. This theme including product lists and details pages, special offer popups and landing pages, promo codes, different types of menus and layouts. Beautiful and unique checkout pages. It’s completed theme and ready for you to start selling bags, clothes, jewellery, shoes and other popular fashion produce.

Install Your Theme


Before installing the theme, you need to install WordPress (see details here). Once you have installed WordPress and logged in to admin panel, you can install klambi theme.

There are two ways to install the theme

  1. Upload via WordPress admin panel.
  2. Upload via FTP directly to your server.

Once your theme is installed, you will be able to customize it by yourself from scratch, or use our Demo Content (see more about it in the relevant chapter).

1. Upload the theme using WordPress admin panel

To upload theme using WP admin panel, please proceed to Appearance > Themes.

Choose “Install theme”

Click “Browse” and choose the klambi theme archive on your computer, then click “Install Now”.

Important!

Please make sure you are not choosing the entire theme archive you have downloaded from Themeforest, you should use only the theme archive. To make installation complete please install the following assets:

  • klambi.zip
  • klambi-child.zip
  • klambi-plugin.zip

Note: To perform the requested action, WordPress needs to access your web server, so when you'll get to uploading the theme, please enter your FTP credentials. If you do not remember your credentials, you should contact your web host.

Once the installation process is finished, click “Activate”.

Make sure you have installed klambi theme, klambi Child Theme and klambi Plugin!

2. Upload theme via FTP

To upload your theme to via FTP, you need to unzip and copy all the files from “klambi” folder to wp-content/themes/klambi directly on the server (use only lower case letters!).

After you did that, klambi theme will be available for activation in WP admin panel: Appearance - Themes. Activate it by clicking “Activate”.
Note: before activating disable all your plugins.

For correct functionality, please, make sure that you consider all of the following:

  1. There are NO NESTED FOLDERS like:
    /wp-content/themes/klambi/klambi.
    A correct path will look like:
    /wp-content/themes/klambi.
  2. You SHOULDN'T copy entire theme archive you have downloaded from Themeforest to your server - only unzipped klambi.zip.
  3. DO NOT rename the theme on your server. Theme names like /wp-content/themes/welfare1 or any other are INAPPROPRIATE. Please make sure the theme folder is called themes/klambi.
  4. Use only lower case letters.

If you've faced an error in the process of theme activation, please, make sure you have followed our instructions carefully. Your server settings may restrict some theme features, so you can try contacting your hosting support for help. If the issue persists, disable all plugins and try again.

In any case, please feel free to contact our support guys, they will help you with theme installation or guide you on what the problem can be - http://kenzap.com/contacts/

Activation and Demo Content

Theme activation and demo content installation is very straightforward and simple. Just follow klambi Installation Wizard. To run Wizard go to klambi section > Setup Wizard as on the image below:

Provide Envato Purchase Code
Install Demo Content
Troubleshooting

Some hosting environmets restrict PHP parameters as a result you may experience error 500 during demo content installation. If this happens with please follow the steps that are described below.

Important!

Before using the theme, please follow an instruction below.

After you have installed WordPress, find the htaccess file on your server, please open it and add (to the very end of the file) the following code:

php_value post_max_size 16M
php_value upload_max_filesize 16M
php_value max_file_uploads 32M
php_value max_input_vars 5000
php_value max_execution_time 500

Please make sure you do this BEFORE installing and activating the theme, if you are installing it via Admin panel, and always BEFORE uploading any demo content.

Note: On some servers you may not be able to alter the htaccess file. If you encounter an issue with this, please contact your hosting provider. Mostly these alterations are needed for Demo Content import.

500 Internal Server Error is the most typical error type. If this is your case please contact your hosting provider first and ask them to change these settings for you either in htaccess file or in PHP.ini configuration file. Why do you need it? Our theme comes with extra demo data and images that should be imported to your hosting. Cheap or shared hosting providers usually limit server resources in order to host a much websites as possible. These parameters are only related to demo content import and your theme can run without them. Manual content import may be time consuming and drag and drop solution over FTP may not help as well. If hosting provider denies changing these parameters we may help you solve this issue. Depending on how long it will take we may charge you extra fee but an insurance prepayment should be made beforehand.

1. Once the theme is uploaded, you need to activate it. Go to Appearance > Themes and activate your chosen theme.

This theme comes bundled with many plugins. Some are required and some are optional.

  1. Klambi - Klambi functionality plugin (Required).
  2. CMB2 - metaboxes and forms with custom fields (Required).
  3. Contact Form 7 - Just contact form plugin (Required).
  4. MailChimp for WordPress - Adds various highly effective sign-up methods to your site (Required).
  5. Regenerate Thumbnails - Allows you to regenerate all thumbnails after changing the thumbnail sizes.
  6. WooCommerce - An e-commerce toolkit that helps you sell anything. Beautifully.
  7. YITH WooCommerce Wishlist - YITH WooCommerce Wishlist allows you to add Wishlist functionality to your e-commerce.
  8. WP Super Cache — WordPress Plugins - Supercache really comes into it's own if your server is underpowered, or you're experiencing heavy traffic. Super Cached html files will be served more quickly.

4.    Klambi plugin requires manual installation. Please go to Plugins > Upload Plugin > Browse and find Klambi_plugin.zip which comes with your purchased items.

2.    Install all bundled plugins as well.

3.    Once plugins are installed, they need to be activated at Plugins > Installed plugins.

4.    Install demo content (optional). The theme comes with a .xml file containing demo content you can import into your WordPress site. This will help you get started, in case you are running on a fresh WordPress installation with no content at all.

  1. Go to Tools > Import
  2. Click "WordPress" to install the WordPress importer.
  3. Contact Form 7 - Just contact form plugin (Required)
  4. On 'Import Wordpress' screen click 'choose file' and select the file /themefolder/demo_content.xml
  5. Click Upload file and import and wait for it to import

Upload Demo Content Details


Important:

Before uploading Demo Content please make sure you have installed and activated ALL PLUGINS that came with the theme. You may reference "Plugins Installation" section of this guide for more information.

To add a Demo content you need to install WordPress Importer plugin.

In your admin panel proceed toTools - Import

And then choose WordPress Importer tool:

Important:

You should have "777" access settings for the wp-content folder before this plugin intallation.
Otherwise your demo content won't be installed.
You may change these permissions back to 755 when the installation is finished.

You can do it using your FTP client or C-panel. See how to set the permissions in more details in Plugin Installation section.

Import the Content Itself:

Demo Content files can be found in the archive you have downloaded from Themeforest. Open the DEMO CONTENT folder, then choose one of the demo websites from which you would like to import settings and content. Each of the folders will include a .xml content import file, a .txt theme settings file and one or more slider import files.

First please proceed to Tools - Import and choose Wordpress Importer, then browse for the .xml demo content file on your computer and click the Upload button:

Please make sure to mark the checkbox as shown on the screenshot below, then click "Submit":

Don't close this browser tab until the installation is finished. Be patient - it may take few minutes.

The WordPress Importer plugin, which adds DEMO content, adds content only - i.e., posts, pages, menus, images. It will not import Theme Settings. Theme settings will be imported separately in the second step.

Note:

1. Demo content adds all the posts and pages just like we have on our demo site, but all the images are substituted with placeholders. Our license does not allow us redistribute images, but quite sure you will find tons of great images on photodune.net - Visit Photodune Now.

2. After you have imported Theme Settings and Demo Content, you need to choose your homepage and your navigation (see instructions for both below).

3. Should there be any difficulties or questions, please feel free to contact our support, we are always glad to help you - http://cloud.kenzap.com.

Choose your Home Page and Navigation:

To set your Home Page please proceed to Settings - Reading and set a Static Page as a home page, then use a drop-down to find and assign a specific page. You should choose "Home":

You also need to assign your navigation. The menu was already imported to your website, but you just need to set it in Appearance - Menus - Manage Locations. Choose Home Menu as Primary Navigation and save changes. There might also be a need to assign other menus too, if they are present on the website you are replicating.

Every part of website is open to customization using default WordPress Customizer. Just go to Appearence > Customize.

2.    Replace your logo, change colors, setup header style and many other options are available here.

3.    Check the list of available theme examples which is also included in demo content.

 

This theme supports two main colors: Main color and Sub color.

In order to change these colors please go to Appearence > Customize > Logo section.

 

First you have to set up Mailchimp subscription form under Mailchimp for WP > Forms section.

Remember your Mailchimp forms ID now and paste it into Mailchimp forms ID setting under Customizer. You can change title and other parameters in Mailchimp's WP > Forms section.

If you plan to use contacts page with embedded Google Maps. You have to provide an API key.

Like on the image above go to Customizer > Advanced section and provide your Google Maps API key that can be regsitered here: https://developers.google.com/maps/documentation/javascript/get-api-key

See the image above on hove to specify extra details tab for every product displayed on your website

Klambi theme comes with various post types like:

  1. FAQ
  2. Promo
  3. Blocks

In order to change information for these custom post types you need to visit appropriate WP menu section:

FAQ

In order to create your first frequently asked question that can later be used on your page go to FAQ > Add New. Provide your meal plan with a title and start declaring your day.

There is no limitation on how many FAQ questions serving per day your program may have so its absolutely flexible here. Click on Add Anothe Meal Button. A new set of rows will be generated with the following fields:

  1. Title - it can be breakfast, lunch, dinned or something completely custom
  2. Description - describe whats inside your servings
  3. Tags - short identifiers, can be used for navigation
  4. Image - image of your serving

Once all meal plans are generated save it and notice the ID number like on the image below. We will use in the next section.

Shortcode

[klambi_faq]

Promo

Promo pages and limited offers can be specified by going to Promo > Add New.

Here are the steps on how to generate your first Promo record:

  1. Enter Title - give a title to your program like: "PRAIRE TALES"
  2. Order - set up display order
  3. Description - describe promo
  4. Button Text - text for button
  5. Button Link - link for button
  6. Time Left - expiration time of your promo
  7. Featured image - image is required. Proper size should be provided
  8. Category - important! Specify category of your promo

Shortcode

[klambi_promo type="sale" category="promo2" per_page="6"]
[klambi_promo type="landing" category="promo1"]

In this section we will cover most popular and complex shortcode customization examples. The easiest way how to adjust shortcodes is to work with demo content which contains all custom shortcodes this theme is based on.

Contacts

For setting up your contact detail page use the following shortcode:

Shortcode Example

[klambi_contact map_url="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3953.131452472411!2d130.38184681425321!3d-7.775883279296736!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e7a59ca2277b3d5%3A0x5de05892db468c4d!2sUniversitas+Negeri+Yogyakarta!5e0!3m2!1sen!2snp!4v1471239219170" title1="Visit Us" title2="Get In Touch" title="WE ARE EXCITED TO HEAR FROM YOU" text="Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam." icon_row1="map-icon.png" icon_row2="phone-icon.png" form_id="537" email="info@kenzap.com" phone="+12345678900" phone_nice="+1 9009 23456789" address="Gondokusuman 3839, Yogyakarta, Indonesia 57766. Office : Monday to Friday: 10am to 7pm" btn_text1="get directions" btn_link1="#" btn_text2="www.klambi.store" btn_link2="#"/]

Important shortcode parameters:

  1. map_url - https://developers.google.com/maps/documentation/embed/start
  2. title1 - first title
  3. title2 - second title
  4. form_id - contact form id, can be specified under Contact > Contact Forms section.
  5. phone - clean phone number, users will call on it once clicked

Product Pages

There are several product grid display options available in this theme. See demo content examples for better understanding. Here are the key parameters:

  1. show_header - enable/disable product filter
  2. type - grid type
  3. category - select products from specified category
  4. sizes - specify sizes filter (ex.: XS,S,M,L,XL)
  5. colors - specify colors filter (ex.: gray,blue,brown,orange,red)
  6. price_max - maximum filter price
  7. price_min - minimum filter price
  8. per_page - records per page
  9. columns - number of grid columns 4 or 6
  10. orderby - default ordering
  11. order - ASC - ascending, DESC - descending

Shortcode Examples

[klambi_products show_header="true" type="cover" sizes="XS,S,M,L,XL" colors="gray,blue,brown,orange,red" price_max="1250" per_page="12" columns="4" orderby="date" order="desc"]

[klambi_products show_header="true" type="cover" sizes="XS,S,M,L,XL" colors="gray,blue,brown,orange,red" price_max="1250" per_page="12" columns="4" orderby="date" order="desc"]

[klambi_products show_header="false" type="minified" per_page="12" columns="4" orderby="date" order="desc"]

This section will describe on how to set up your first product for sale using popular WooCommerce plugin:

1. Specify product attributes

The image above shows multiple attribute examples that may use once describing your product. Two attributes are mandatory in fact and would be used for product filtering and purchase customization. These are:

  1. color - available product colors
  2. size - available product sizes

2. Specify color attribute

Demo content includes predefined colors but you may modify them or add new ones. The important field is description as it contains color code. In order to pick up your color value in HEX format and write it inside description field. Use Google Color Picker by clicking here. For color attibute you have to specify two fields (the rest is generated automatically):

  1. name - color name you will use for product declaration
  2. description - contains hex color representation of your custom defined color

Click on Configure Term to modify your color record like on the image below

3. Specify size attribute

Demo content includes predefined sizes but you may modify them or add new ones. The important field is description as it contains size description. For size attibute you have to specify two fields (the rest is generated automatically):

  1. name - size name you will use for product declaration
  2. description - contains description for custom defined size

Click on Configure Term to modify your size record like on the image below.

4. Create your product

To start creating your first product go to Product > Add product. Follow the steps below:

  1. add product.
  2. specify product title.
  3. describe product content.
  4. set up regular and sales price if any.
  5. add prodcut category (will be used for filtering, specify multiple categories per product).
  6. add product tags.

Do not publish product at this stage but continue filling the information:

  1. click on product attributes tab.
  2. chose attribute and specify appropriate values defined in previous sections (color, size etc.).
  3. use | as value separator.
  4. save attribute. All specified attributes except color and size will appear in Details product tab.
  5. select product main image. Add product gallery images as well below.
  6. enter product list subtitle.

5. Publish your product

Check live result once your product is published.

6. Cart and checkout pages

Go to WooCommerce > Settings > Checkout. Specify Cart and Checkout page by following the steps as on the image above.

Most popular problems are highlighted below. You can browse them in more details in the following sections.

  1. Stylesheet Missing error
  2. Shortcode doesn't display correctly
  3. Problems with facebook sharing
  4. How to access web console
  5. Problems with SSL
  6. Are you sure you want to do this? Please try again
  7. Demo content now showing properly

1. Stylesheet Missing error

A common issue that can occur with users new to installing WordPress themes is a "Broken theme and/or stylesheets missing” error message being displayed when trying to upload or activate the theme. This error message does not mean that the theme you have purchased is broken, it simply means it has been uploaded incorrectly. Luckily,  there is a very easy fix. Please follow the steps below to rectify this issue or watch the screencast.

  1. Download the final zip file from your downloads page.
  2. Unzip the final zip file; you should now have a final download folder.
  3. Do NOT upload the final download folder. Open up the final download folder.
  4. Browse the contents and find the actual theme folder. If you look inside the theme folder, you will see a “style.css” file. This is how you know you have found the theme folder.
  5. Using an FTP client, upload ONLY the theme folder to your “wp-content/themes” folder.
  6. Login to your WordPress admin panel and activate the theme.

    Optional: If you do not wish to manually upload the theme only folder to your “themes” folder, there is an option. You can zip up the theme folder (remember, ONLY the theme folder) and upload it via the WordPress themes admin panel by selecting “add new” and clicking “upload”. That's all there is to it, please be absolutely sure you are uploading only the theme folder when trying to install a WordPress theme. If you have specific item questions or require technical assistance, we recommend you contact the author via their profile page.

2. Shortcode doesn't display correctly

If you pasted correctly your shortcodes and that the display looks messed-up, make sure you did not embed the shortcode between  <pre> tags. That’s a fairly common issue. To removethese tags, edit the page, and click on the “Text” tab:

3. Problems with facebook sharing

If you have problems with facebook sharing or other sharing plugins, try install this plugin:  https://wordpress.org/plugins/wordpress-seo/

It adds the correct sharing meta tags for each page.

4. How to access web console

The web console is used to track if you got any Javascript errors on your page. Use these steps to open and troubleshoot the console:

1. Use this keyboard shortcuts to open the console:

  1. Chrome - Press Ctrl+Shift+J (Windows / Linux) or Cmd+Opt+J (Mac).
  2. Safari - Press Cmd+Opt+C.

2. Refresh current page.

3. Check console for errors.

6. Are you sure you want to do this? Please try again

Are you sure you want to do this? Please try again.

If you are installing your theme from the WordPress theme installer, but get a message that says Are you sure you want to do this?, most likely your web server is configured with low PHP settings that only allow a certain size ZIP file to be uploaded via WP admin.

Most hosting companies configure their servers to only have the maximum file upload size limit at 8-10 MB, some are less. The Flatsome theme ZIP is currently about 10 MB in size which is due to the included plugins and all the demo content. So if you get this error, your web server is rejecting the upload due to the overall size of the Flatsome3.0.zip file. WordPress is unfortunately giving you a rather ambiguous message in response. This is not a theme issue or bug.

There two ways to solve this problem.

  • You can get your web host to increase your PHP limits so a larger zip file is allowed to be uploaded. They will know which limits to set if you explain the issue.
  • You can upload your theme via FTP.

Recommended PHP configuration limits are as follows:

  • max_execution_time 60
  • memory_limit 128M
  • post_max_size 48M
  • upload_max_filesize 48M

7. Demo content not showing properly

If you experience uploading demo content the problem please check below:

  • Make sure again you followed installation steps correctly.
  • Check permissions. Make it 777 before upload and 755 after.
  • PHP settings are correct. Refer to section above.

If you need help please contact us and we'll get back to you as soon as possible. Please provide the following information:

  1. The name of the theme you are having issues with
  2. Please also describe the problem in details as this will help us solve the issue quicker

Email us at info@kenzap.com and we will get back to you as soon as possible.